<template>
  <div style="background-color:white">
    <header>
      <h3>{{$route.params.title}}</h3>
    </header>
    <section>
      <div v-if="isLoading">
        <!-- 加载效果 -->
        <van-skeleton v-for="i in 5" :key="i" title :row="3" style="margin-bottom:10px" />
      </div>
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <ul v-if="!isLoading" class="song-list">
            <li v-for="item in list" :key="item.song_id">
              <img :src="item.pic_s500" alt />
              <p>{{item.title}}</p>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </section>
  </div>
</template>

<script>
import { getBillList } from "../api/baidu-music";
export default {
  data() {
    return {
      list: [],
      // 正在加载，显示加载效果
      isLoading: false,
      refreshing: false,
      loading: false,
      finished: false,
      offset:0
    };
  },
  created() {
    // getBillList(this.$route.params.type, 6).then((res) => {
    //   this.list = res.songList;
    //   this.isLoading = false;
    // });
  },
  methods: {
    onRefresh() {
      // 每次下拉刷新会执行的事件
      this.isLoading = true;
      this.list = [];
      getBillList(this.$route.params.type, 6).then((res) => {
        this.list = res.songList;
        this.isLoading = false;
        this.refreshing = false;
      });
    },
    onLoad() {
      // 每次触底的时候执行的方法
      getBillList(this.$route.params.type, 6,this.offset).then((res) => {
        this.list = this.list.concat(res.songList);
        this.loading = false;
        this.offset += 6;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.song-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  li {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;

    img {
      width: 100%;
    }
  }
}
</style>